
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon ftrystyle icon-edit"></i>
                    <div class="name">edit</div>
                    <div class="fontclass">.icon-edit</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-del"></i>
                    <div class="name">del</div>
                    <div class="fontclass">.icon-del</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-loading"></i>
                    <div class="name">loading</div>
                    <div class="fontclass">.icon-loading</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-add"></i>
                    <div class="name">add</div>
                    <div class="fontclass">.icon-add</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-attachment"></i>
                    <div class="name">attachment</div>
                    <div class="fontclass">.icon-attachment</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-back2top"></i>
                    <div class="name">back2top</div>
                    <div class="fontclass">.icon-back2top</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-close"></i>
                    <div class="name">close</div>
                    <div class="fontclass">.icon-close</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-costincluded"></i>
                    <div class="name">costincluded</div>
                    <div class="fontclass">.icon-costincluded</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-costnotincluded"></i>
                    <div class="name">costnotincluded</div>
                    <div class="fontclass">.icon-costnotincluded</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-discoverline"></i>
                    <div class="name">discover_line</div>
                    <div class="fontclass">.icon-discoverline</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-discovershape"></i>
                    <div class="name">discover_shape</div>
                    <div class="fontclass">.icon-discovershape</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-earth"></i>
                    <div class="name">earth</div>
                    <div class="fontclass">.icon-earth</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-ensure"></i>
                    <div class="name">ensure</div>
                    <div class="fontclass">.icon-ensure</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-guide2"></i>
                    <div class="name">guide_2</div>
                    <div class="fontclass">.icon-guide2</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-guidepost"></i>
                    <div class="name">guidepost</div>
                    <div class="fontclass">.icon-guidepost</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-help"></i>
                    <div class="name">help</div>
                    <div class="fontclass">.icon-help</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-homeline"></i>
                    <div class="name">home_line</div>
                    <div class="fontclass">.icon-homeline</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-homeshape"></i>
                    <div class="name">home_shape</div>
                    <div class="fontclass">.icon-homeshape</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-like2line"></i>
                    <div class="name">like_2_line</div>
                    <div class="fontclass">.icon-like2line</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-sign"></i>
                    <div class="name">sign</div>
                    <div class="fontclass">.icon-sign</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-announcement"></i>
                    <div class="name">announcement</div>
                    <div class="fontclass">.icon-announcement</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-chef"></i>
                    <div class="name">chef</div>
                    <div class="fontclass">.icon-chef</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-clock"></i>
                    <div class="name">clock</div>
                    <div class="fontclass">.icon-clock</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-down"></i>
                    <div class="name">down</div>
                    <div class="fontclass">.icon-down</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-enter"></i>
                    <div class="name">enter</div>
                    <div class="fontclass">.icon-enter</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-expression"></i>
                    <div class="name">expression</div>
                    <div class="fontclass">.icon-expression</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-guide"></i>
                    <div class="name">guide</div>
                    <div class="fontclass">.icon-guide</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-internationalflight"></i>
                    <div class="name">internationalflight</div>
                    <div class="fontclass">.icon-internationalflight</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-like"></i>
                    <div class="name">like</div>
                    <div class="fontclass">.icon-like</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-myline"></i>
                    <div class="name">my_line</div>
                    <div class="fontclass">.icon-myline</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-myshape"></i>
                    <div class="name">my_shape</div>
                    <div class="fontclass">.icon-myshape</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-passport"></i>
                    <div class="name">passport</div>
                    <div class="fontclass">.icon-passport</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-process"></i>
                    <div class="name">process</div>
                    <div class="fontclass">.icon-process</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-screen"></i>
                    <div class="name">screen</div>
                    <div class="fontclass">.icon-screen</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-search"></i>
                    <div class="name">search</div>
                    <div class="fontclass">.icon-search</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-ship"></i>
                    <div class="name">ship</div>
                    <div class="fontclass">.icon-ship</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-add2"></i>
                    <div class="name">add_2</div>
                    <div class="fontclass">.icon-add2</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-map"></i>
                    <div class="name">map</div>
                    <div class="fontclass">.icon-map</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-message"></i>
                    <div class="name">message</div>
                    <div class="fontclass">.icon-message</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-orderlist"></i>
                    <div class="name">orderlist</div>
                    <div class="fontclass">.icon-orderlist</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-parkinglot"></i>
                    <div class="name">parkinglot</div>
                    <div class="fontclass">.icon-parkinglot</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-passenger"></i>
                    <div class="name">passenger</div>
                    <div class="fontclass">.icon-passenger</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-play"></i>
                    <div class="name">play</div>
                    <div class="fontclass">.icon-play</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-refresh"></i>
                    <div class="name">refresh</div>
                    <div class="fontclass">.icon-refresh</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-refund"></i>
                    <div class="name">refund</div>
                    <div class="fontclass">.icon-refund</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-selectseat"></i>
                    <div class="name">selectseat</div>
                    <div class="fontclass">.icon-selectseat</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-switch"></i>
                    <div class="name">switch</div>
                    <div class="fontclass">.icon-switch</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-ticket"></i>
                    <div class="name">ticket</div>
                    <div class="fontclass">.icon-ticket</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-time"></i>
                    <div class="name">time</div>
                    <div class="fontclass">.icon-time</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-timetable"></i>
                    <div class="name">timetable</div>
                    <div class="fontclass">.icon-timetable</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-up"></i>
                    <div class="name">up</div>
                    <div class="fontclass">.icon-up</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-vacation"></i>
                    <div class="name">vacation</div>
                    <div class="fontclass">.icon-vacation</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-wangwang"></i>
                    <div class="name">wangwang</div>
                    <div class="fontclass">.icon-wangwang</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-breakfast"></i>
                    <div class="name">breakfast</div>
                    <div class="fontclass">.icon-breakfast</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-broadband"></i>
                    <div class="name">broadband</div>
                    <div class="fontclass">.icon-broadband</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-bus"></i>
                    <div class="name">bus</div>
                    <div class="fontclass">.icon-bus</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-bussiness"></i>
                    <div class="name">bussiness</div>
                    <div class="fontclass">.icon-bussiness</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-calendar"></i>
                    <div class="name">calendar</div>
                    <div class="fontclass">.icon-calendar</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-china"></i>
                    <div class="name">china</div>
                    <div class="fontclass">.icon-china</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-collect"></i>
                    <div class="name">collect</div>
                    <div class="fontclass">.icon-collect</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-crown"></i>
                    <div class="name">crown</div>
                    <div class="fontclass">.icon-crown</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-detail"></i>
                    <div class="name">detail</div>
                    <div class="fontclass">.icon-detail</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-endorse"></i>
                    <div class="name">endorse</div>
                    <div class="fontclass">.icon-endorse</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-exit"></i>
                    <div class="name">exit</div>
                    <div class="fontclass">.icon-exit</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-failed"></i>
                    <div class="name">failed</div>
                    <div class="fontclass">.icon-failed</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-flight"></i>
                    <div class="name">flight</div>
                    <div class="fontclass">.icon-flight</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-food"></i>
                    <div class="name">food</div>
                    <div class="fontclass">.icon-food</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-hint"></i>
                    <div class="name">hint</div>
                    <div class="fontclass">.icon-hint</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-hotel"></i>
                    <div class="name">hotel</div>
                    <div class="fontclass">.icon-hotel</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-information2"></i>
                    <div class="name">information_2</div>
                    <div class="fontclass">.icon-information2</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-internationalattraction"></i>
                    <div class="name">internationalattraction</div>
                    <div class="fontclass">.icon-internationalattraction</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-journeyline"></i>
                    <div class="name">journey_line</div>
                    <div class="fontclass">.icon-journeyline</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-journeyshape"></i>
                    <div class="name">journey_shape</div>
                    <div class="fontclass">.icon-journeyshape</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-lamp"></i>
                    <div class="name">lamp</div>
                    <div class="fontclass">.icon-lamp</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-loaction"></i>
                    <div class="name">loaction</div>
                    <div class="fontclass">.icon-loaction</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-meeting"></i>
                    <div class="name">meeting</div>
                    <div class="fontclass">.icon-meeting</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-more2"></i>
                    <div class="name">more_2</div>
                    <div class="fontclass">.icon-more2</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-nationalattraction"></i>
                    <div class="name">nationalattraction</div>
                    <div class="fontclass">.icon-nationalattraction</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-nationglattraction2"></i>
                    <div class="name">nationglattraction_2</div>
                    <div class="fontclass">.icon-nationglattraction2</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-navigation"></i>
                    <div class="name">navigation</div>
                    <div class="fontclass">.icon-navigation</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-order"></i>
                    <div class="name">order</div>
                    <div class="fontclass">.icon-order</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-phone"></i>
                    <div class="name">phone</div>
                    <div class="fontclass">.icon-phone</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-pool"></i>
                    <div class="name">pool</div>
                    <div class="fontclass">.icon-pool</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-reduce"></i>
                    <div class="name">reduce</div>
                    <div class="fontclass">.icon-reduce</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-reminder"></i>
                    <div class="name">reminder</div>
                    <div class="fontclass">.icon-reminder</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-sale"></i>
                    <div class="name">sale</div>
                    <div class="fontclass">.icon-sale</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-scan"></i>
                    <div class="name">scan</div>
                    <div class="fontclass">.icon-scan</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-setting"></i>
                    <div class="name">setting</div>
                    <div class="fontclass">.icon-setting</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-more"></i>
                    <div class="name">more</div>
                    <div class="fontclass">.icon-more</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-activity"></i>
                    <div class="name">activity</div>
                    <div class="fontclass">.icon-activity</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-back2"></i>
                    <div class="name">back_2</div>
                    <div class="fontclass">.icon-back2</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-diamond"></i>
                    <div class="name">diamond</div>
                    <div class="fontclass">.icon-diamond</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-discovery2line"></i>
                    <div class="name">discovery_2_line</div>
                    <div class="fontclass">.icon-discovery2line</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shop"></i>
                    <div class="name">shop</div>
                    <div class="fontclass">.icon-shop</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shopping"></i>
                    <div class="name">shopping</div>
                    <div class="fontclass">.icon-shopping</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shower"></i>
                    <div class="name">shower</div>
                    <div class="fontclass">.icon-shower</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-sing"></i>
                    <div class="name">sing</div>
                    <div class="fontclass">.icon-sing</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-succed"></i>
                    <div class="name">succed</div>
                    <div class="fontclass">.icon-succed</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-taxi"></i>
                    <div class="name">taxi</div>
                    <div class="fontclass">.icon-taxi</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-train"></i>
                    <div class="name">train</div>
                    <div class="fontclass">.icon-train</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-training"></i>
                    <div class="name">training</div>
                    <div class="fontclass">.icon-training</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-unpaidorder"></i>
                    <div class="name">unpaidorder</div>
                    <div class="fontclass">.icon-unpaidorder</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-washmachine"></i>
                    <div class="name">washmachine</div>
                    <div class="fontclass">.icon-washmachine</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-wifi"></i>
                    <div class="name">wifi</div>
                    <div class="fontclass">.icon-wifi</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-add2journey"></i>
                    <div class="name">add2journey</div>
                    <div class="fontclass">.icon-add2journey</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-home2line"></i>
                    <div class="name">home_2_line</div>
                    <div class="fontclass">.icon-home2line</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-home2shape"></i>
                    <div class="name">home_2_shape</div>
                    <div class="fontclass">.icon-home2shape</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-information"></i>
                    <div class="name">information</div>
                    <div class="fontclass">.icon-information</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-journey2line"></i>
                    <div class="name">journey_2_line</div>
                    <div class="fontclass">.icon-journey2line</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-journey2shape"></i>
                    <div class="name">journey_2_shape</div>
                    <div class="fontclass">.icon-journey2shape</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-left"></i>
                    <div class="name">back_3</div>
                    <div class="fontclass">.icon-left</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-like2shape"></i>
                    <div class="name">like_2_shape</div>
                    <div class="fontclass">.icon-like2shape</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-my2line"></i>
                    <div class="name">my_2_line</div>
                    <div class="fontclass">.icon-my2line</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-my2shape"></i>
                    <div class="name">my_2_shape</div>
                    <div class="fontclass">.icon-my2shape</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapeballon"></i>
                    <div class="name">shape_ballon</div>
                    <div class="fontclass">.icon-shapeballon</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapecar"></i>
                    <div class="name">shape_car</div>
                    <div class="fontclass">.icon-shapecar</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapecastle"></i>
                    <div class="name">shape_castle</div>
                    <div class="fontclass">.icon-shapecastle</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapecrown"></i>
                    <div class="name">shape_crown</div>
                    <div class="fontclass">.icon-shapecrown</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapedrift"></i>
                    <div class="name">shape_drift</div>
                    <div class="fontclass">.icon-shapedrift</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-left1"></i>
                    <div class="name">left</div>
                    <div class="fontclass">.icon-left1</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-remind2"></i>
                    <div class="name">remind_2</div>
                    <div class="fontclass">.icon-remind2</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapefood"></i>
                    <div class="name">shape_food</div>
                    <div class="fontclass">.icon-shapefood</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapegarden"></i>
                    <div class="name">shape_garden</div>
                    <div class="fontclass">.icon-shapegarden</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapeinternationaldrive"></i>
                    <div class="name">shape_internationaldrive</div>
                    <div class="fontclass">.icon-shapeinternationaldrive</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapeinternationalspot"></i>
                    <div class="name">shape_internationalspot</div>
                    <div class="fontclass">.icon-shapeinternationalspot</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapejourney2"></i>
                    <div class="name">shape_journey_2</div>
                    <div class="fontclass">.icon-shapejourney2</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapejourney"></i>
                    <div class="name">shape_journey</div>
                    <div class="fontclass">.icon-shapejourney</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapekid"></i>
                    <div class="name">shape_kid</div>
                    <div class="fontclass">.icon-shapekid</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapelover"></i>
                    <div class="name">shape_lover</div>
                    <div class="fontclass">.icon-shapelover</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapemeditation"></i>
                    <div class="name">shape_meditation</div>
                    <div class="fontclass">.icon-shapemeditation</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapeocean"></i>
                    <div class="name">shape_ocean</div>
                    <div class="fontclass">.icon-shapeocean</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapeonedaytrip"></i>
                    <div class="name">shape_onedaytrip</div>
                    <div class="fontclass">.icon-shapeonedaytrip</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapeship"></i>
                    <div class="name">shape_ship</div>
                    <div class="fontclass">.icon-shapeship</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapesign"></i>
                    <div class="name">shape_sign</div>
                    <div class="fontclass">.icon-shapesign</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapeskiing"></i>
                    <div class="name">shape_skiing</div>
                    <div class="fontclass">.icon-shapeskiing</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapesleep"></i>
                    <div class="name">shape_sleep</div>
                    <div class="fontclass">.icon-shapesleep</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapespot"></i>
                    <div class="name">shape_spot</div>
                    <div class="fontclass">.icon-shapespot</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapetaxi"></i>
                    <div class="name">shape_taxi</div>
                    <div class="fontclass">.icon-shapetaxi</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapebook"></i>
                    <div class="name">shape_book</div>
                    <div class="fontclass">.icon-shapebook</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapedestination"></i>
                    <div class="name">shape_destination</div>
                    <div class="fontclass">.icon-shapedestination</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapedriver"></i>
                    <div class="name">shape_driver</div>
                    <div class="fontclass">.icon-shapedriver</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapeflight"></i>
                    <div class="name">shape_flight</div>
                    <div class="fontclass">.icon-shapeflight</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapeflightjourney"></i>
                    <div class="name">shape_flightjourney</div>
                    <div class="fontclass">.icon-shapeflightjourney</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapegas"></i>
                    <div class="name">shape_gas</div>
                    <div class="fontclass">.icon-shapegas</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapehotel"></i>
                    <div class="name">shape_hotel</div>
                    <div class="fontclass">.icon-shapehotel</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapejourneymessage"></i>
                    <div class="name">shape_journeymessage</div>
                    <div class="fontclass">.icon-shapejourneymessage</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapenationalspot"></i>
                    <div class="name">shape_nationalspot</div>
                    <div class="fontclass">.icon-shapenationalspot</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapetransport"></i>
                    <div class="name">shape_transport</div>
                    <div class="fontclass">.icon-shapetransport</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapewangwang"></i>
                    <div class="name">shape_wangwang</div>
                    <div class="fontclass">.icon-shapewangwang</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapewarmspring"></i>
                    <div class="name">shape_warmspring</div>
                    <div class="fontclass">.icon-shapewarmspring</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapewifiphone"></i>
                    <div class="name">shape_wifiphone</div>
                    <div class="fontclass">.icon-shapewifiphone</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapebus"></i>
                    <div class="name">shape_bus</div>
                    <div class="fontclass">.icon-shapebus</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapewifi"></i>
                    <div class="name">shape_wifi</div>
                    <div class="fontclass">.icon-shapewifi</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shoppingcart"></i>
                    <div class="name">shoppingcart</div>
                    <div class="fontclass">.icon-shoppingcart</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-travelheadlines"></i>
                    <div class="name">travelheadlines</div>
                    <div class="fontclass">.icon-travelheadlines</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-weekendtrip"></i>
                    <div class="name">weekendtrip</div>
                    <div class="fontclass">.icon-weekendtrip</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapepassport"></i>
                    <div class="name">shape_passport</div>
                    <div class="fontclass">.icon-shapepassport</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapeticket"></i>
                    <div class="name">shape_ticket</div>
                    <div class="fontclass">.icon-shapeticket</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapevacation"></i>
                    <div class="name">shape_vacation</div>
                    <div class="fontclass">.icon-shapevacation</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapeweekendtrip"></i>
                    <div class="name">shape_weekendtrip</div>
                    <div class="fontclass">.icon-shapeweekendtrip</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapetrain"></i>
                    <div class="name">shape_train</div>
                    <div class="fontclass">.icon-shapetrain</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shapeshopping"></i>
                    <div class="name">shape_shopping</div>
                    <div class="fontclass">.icon-shapeshopping</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-lightoff"></i>
                    <div class="name">light_off</div>
                    <div class="fontclass">.icon-lightoff</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-lighton"></i>
                    <div class="name">light_on</div>
                    <div class="fontclass">.icon-lighton</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-right-copy"></i>
                    <div class="name">right</div>
                    <div class="fontclass">.icon-right-copy</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-discovery2shape-copy"></i>
                    <div class="name">discovery_2_shape</div>
                    <div class="fontclass">.icon-discovery2shape-copy</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-share-copy"></i>
                    <div class="name">share</div>
                    <div class="fontclass">.icon-share-copy</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-icon2"></i>
                    <div class="name">list</div>
                    <div class="fontclass">.icon-icon2</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-icon21"></i>
                    <div class="name">image</div>
                    <div class="fontclass">.icon-icon21</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-camera"></i>
                    <div class="name">camera</div>
                    <div class="fontclass">.icon-camera</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-back"></i>
                    <div class="name">back</div>
                    <div class="fontclass">.icon-back</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-delete"></i>
                    <div class="name">delete</div>
                    <div class="fontclass">.icon-delete</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-111"></i>
                    <div class="name">narrow</div>
                    <div class="fontclass">.icon-111</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-fullscreen"></i>
                    <div class="name">fullscreen</div>
                    <div class="fontclass">.icon-fullscreen</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-play_2"></i>
                    <div class="name">play_2</div>
                    <div class="fontclass">.icon-play_2</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-pause"></i>
                    <div class="name">pause</div>
                    <div class="fontclass">.icon-pause</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shoppingcart2shape"></i>
                    <div class="name">shoppingcart_2_shape</div>
                    <div class="fontclass">.icon-shoppingcart2shape</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-shoppingcart2line"></i>
                    <div class="name">shoppingcart_2_line</div>
                    <div class="fontclass">.icon-shoppingcart2line</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-select"></i>
                    <div class="name">select</div>
                    <div class="fontclass">.icon-select</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-selectcity"></i>
                    <div class="name">select_city</div>
                    <div class="fontclass">.icon-selectcity</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-selectmethod"></i>
                    <div class="name">select_method</div>
                    <div class="fontclass">.icon-selectmethod</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-selectlocal"></i>
                    <div class="name">select_local</div>
                    <div class="fontclass">.icon-selectlocal</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-fill_recommend"></i>
                    <div class="name">fill_recommend</div>
                    <div class="fontclass">.icon-fill_recommend</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-fill_flight"></i>
                    <div class="name">fill_flight</div>
                    <div class="fontclass">.icon-fill_flight</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-fill_passport"></i>
                    <div class="name">fill_passport</div>
                    <div class="fontclass">.icon-fill_passport</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-fill_hotel"></i>
                    <div class="name">fill_hotel</div>
                    <div class="fontclass">.icon-fill_hotel</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-fill_car"></i>
                    <div class="name">fill_car</div>
                    <div class="fontclass">.icon-fill_car</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-filltransfer"></i>
                    <div class="name">fill_transfer</div>
                    <div class="fontclass">.icon-filltransfer</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-fillwifisim"></i>
                    <div class="name">fill_wifisim</div>
                    <div class="fontclass">.icon-fillwifisim</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-fillticket"></i>
                    <div class="name">fill_ticket</div>
                    <div class="fontclass">.icon-fillticket</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-filllocalplay"></i>
                    <div class="name">fill_localplay</div>
                    <div class="fontclass">.icon-filllocalplay</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-more3"></i>
                    <div class="name">more3</div>
                    <div class="fontclass">.icon-more3</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-logo"></i>
                    <div class="name">logo</div>
                    <div class="fontclass">.icon-logo</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-trave_days"></i>
                    <div class="name">trave_days</div>
                    <div class="fontclass">.icon-trave_days</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-transfer"></i>
                    <div class="name">transfer</div>
                    <div class="fontclass">.icon-transfer</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-weidenglu"></i>
                    <div class="name">未登陆</div>
                    <div class="fontclass">.icon-weidenglu</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-yijianfankui"></i>
                    <div class="name">意见反馈</div>
                    <div class="fontclass">.icon-yijianfankui</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-youhuiquan"></i>
                    <div class="name">优惠券</div>
                    <div class="fontclass">.icon-youhuiquan</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-gouwuche"></i>
                    <div class="name">购物车</div>
                    <div class="fontclass">.icon-gouwuche</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-huidaodingbu"></i>
                    <div class="name">回到顶部</div>
                    <div class="fontclass">.icon-huidaodingbu</div>
                </li>
            
                <li>
                <i class="icon ftrystyle icon-saoyisao"></i>
                    <div class="name">扫一扫</div>
                    <div class="fontclass">.icon-saoyisao</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">ftrystyle</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"ftrystyle"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
